* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

html {
    color: @Color;
    font-size: 16px;
}
p{
    box-sizing: border-box;
}

@Color: #245f99;

.container {
    background-color: #fff;
    margin: 50px auto;
    border: 1px solid #ccc;
    width: 900px;
    height: 550px;
    padding: 30px 40px;
    position: relative;
    .dw{
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        right: 0px;
        width: 30px;
        font-size: 16px;
    }

    header {
        position: relative;
        width: 100%;

        h1 {
            height: 40px;
            line-height: 40px;
            font-size: 24px;
            color: @Color;
            text-align: center;
            letter-spacing: 10px;
            position: relative;
        }

        p {
            position: absolute;
            top: 30px;
            right: 0;

            span {
                &:nth-of-type(1) {
                    font-size: 18px;
                    // font-weight: 550;
                }

                &:nth-of-type(2) {
                    display: inline-block;
                    width: 14px;
                    font-size: 14px;
                    text-decoration: underline;
                    position: relative;
                    left: -5px;
                    bottom: 1.5px;
                }

                &:nth-of-type(3) {
                    position: relative;
                    left: -12px;
                    font-size: 18px;

                }

                &:nth-of-type(4) {
                    color: #ba4e4e;
                    letter-spacing: 2px;
                    font-size: 18px;
                }

            }
        }

        .time {
            margin-top: 5px;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                margin-right: 20px;
                // font-size: 14px;

            }
        }

        .menuTitle {
            margin-top: 15px;
            padding-left: 5px;
            width: 100%;
            display: flex;

            .item {
                flex: 1;

                span {

                    //   font-size: 14px;
                    &:nth-of-type(1) {
                        // font-weight: 550;
                    }

                }
            }
        }
    }
}

.tbody {
    margin-top: 10px;
    width: 100%;
    height: 340px;
    //   background-color: red;
    display: flex;
    flex-direction: column;
    border: 2px solid @Color;
    position: relative;
    .dw{
        position: absolute;
        top: 50%;
        right: -40px;
    }

    .top1 {
        flex: 8;
        display: flex;

        .left1 {
            flex: 7;
            border-right: 1px solid @Color;
            display: flex;
            flex-direction: column;

            .top2 {
                flex: 2;
                display: flex;
                flex-direction: column;

                .top3 {
                    padding-left: 5px;
                    flex: 2;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    p {
                        flex: 1;

                        span {
                            margin-right: 5px;
                        }
                    }

                }

                .footer3 {
                    border-top: 1px solid @Color;
                    flex: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    p {
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        &:nth-of-type(1) {
                            flex: 2;
                            display: flex;
                            justify-content: space-around;
                            span{
                                &:nth-of-type(1){
                                    margin-left: 60px;
                                }
                                &:nth-of-type(2){
                                    margin-right: 60px;
                                }
                            }
                        }

                        &:nth-of-type(2) {
                            flex: 1;
                            border-left: 1px solid @Color;
                        }

                    }

                }


            }

            .footer2 {
                flex: 5;
                display: flex;
                flex-direction: column;

                .itemL {
                    border-top: 1px solid @Color;
                    flex: 1;
                    display: flex;
                   
                    &:nth-last-of-type(1){
                        .leftL {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            span{
                                // display: flex;
                                // justify-content: center;
                                // align-items: center;
                                &:nth-of-type(1){
                                    margin-right: 40px;
                                }
                                &:nth-of-type(2){
                                    margin-left: 40px;
                                }
                            }
                        }
                    }

                    .leftL {
                        flex: 2;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .rightL {
                        flex: 1;
                        border-left: 1px solid @Color;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                    }
                }

            }
        }

        .right1 {
            flex: 1;
            display: flex;
            flex-direction: column;

            .top2 {
                flex: 2;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid @Color;
                padding-bottom: 3px;

            }

            .footer2 {
                padding: 3px;
                flex: 5;
                font-size: 14px;

            }

        }


    }

    .footer1 {
        border-top: 1px solid @Color;
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 40px;
        padding-left: 5px;
        .footerH{
            width: 180px;
            .icon {
                margin-left: 3px;
            
            }

        }

       

        span {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            letter-spacing: 3px;
        }

    }
}

footer {
    margin-top: 10px;
    height: 30px;
    display: flex;
    padding-left: 5px;

    .item {
        flex: 1;
        justify-content: center;
        align-items: center;

        span {}
    }
}
